<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="../templates/templateAdminPrincipal.xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:samupgcomposite="http://java.sun.com/jsf/composite/samupgcomposite">

	<ui:define name="windowTitle">
		SAMUPG - Gestión Periodos
		<style type="text/css">
			.styledlgPeriodo {
				width: auto;
			}
		</style>
    </ui:define>

	<ui:define name="contenido">
		<h:form id="form1" prependId="true">
			<p:tabView id="tvGestionPeriodos">
				<p:tab title="Gestión de Periodos">
					<p:menubar>
						<p:menuitem value="Crear" icon="ui-icon-disk"
							actionListener="#{abrirPeriodoController.initPeriodo}"
							update=":dlgPeriodo" oncomplete="abrirDialog()" process="@this">
							<f:attribute name="tipo" value="0" />
						</p:menuitem>

						<p:menuitem value="Editar" icon="ui-icon-pencil"
							actionListener="#{gestionPeriodosController.initPeriodo}"
							process="@this,dtPeriodos" update=":dlgPeriodo"
							oncomplete="periodoInit(xhr, status, args)"
							onstart="return validSelection();">
							<f:attribute name="tipo" value="1" />
						</p:menuitem>

						<p:menuitem value="Actualizar" icon="ui-icon-refresh"
							actionListener="#{gestionPeriodosController.refreshPeriodos}"
							update="dtPeriodos" />

						<p:menuitem value="Eliminar" icon="ui-icon-circle-close"
							actionListener="#{gestionPeriodosController.initPeriodo}"
							process="@this,dtPeriodos"
							oncomplete="periodoDeleteInit(xhr, status, args)"
							onstart="return validSelection();">
							<f:attribute name="tipo" value="2" />
						</p:menuitem>
					</p:menubar>
					<br />

					<p:dataTable id="dtPeriodos" widgetVar="wdtPeriodos"
						value="#{gestionPeriodosController.periodos}" var="periodo"
						rowKey="#{periodo.periodoId}"
						selection="#{gestionPeriodosController.periodoSeleccionado}"
						selectionMode="single">

						<p:column headerText="Nombre">
							#{periodo.nombre}
						</p:column>

						<p:column headerText="Fecha Inicio">
							#{periodo.fechaInicio}
						</p:column>

						<p:column headerText="Fecha Fin">
							#{periodo.fechaFin}
						</p:column>
					</p:dataTable>
				</p:tab>
			</p:tabView>
		</h:form>

		<p:dialog id="dlgPeriodo" widgetVar="wdlgPeriodo" header="Periodo" style="styledlgPeriodo"
			modal="true" width="850" showEffect="clip" hideEffect="fold" onShow="showDialog();">
			
			<samupgcomposite:editPeriodoComposite id="compEditPeriodo"></samupgcomposite:editPeriodoComposite>
			
			<h:form id="form2">
				<p:remoteCommand name="rcUpdatePeriodos" update=":form1:tvGestionPeriodos:dtPeriodos" />
				<p:remoteCommand name="rcLoadPeriodos" update=":form1:tvGestionPeriodos:dtPeriodos" actionListener="#{gestionPeriodosController.refreshPeriodos}"/>
			</h:form>
		</p:dialog>

		<h:form id="form3">
			<p:confirmDialog id="deleteConfirmation"
				message="¿Seguro que quiere eliminar un periodo?"
				header="Confirmación" severity="alert"
				widgetVar="wdeleteConfirmation">

				<p:commandButton value="Aceptar"
					oncomplete="wdeleteConfirmation.hide()"
					actionListener="#{gestionPeriodosController.editPeriodo}"
					update=":form1:tvGestionPeriodos:dtPeriodos" />

				<p:commandButton value="Cancelar"
					onclick="wdeleteConfirmation.hide()" type="button" process="@this" />
			</p:confirmDialog>
		</h:form>

		<script type="text/javascript">
			function periodoInit(xhr, status, args) {
				if (args.isSeleccionado) {
					wdlgPeriodo.show();
				} else {
					alert('Debe seleccionar un periodo');
				}
			}

			function periodoDeleteInit(xhr, status, args) {
				if (args.isSeleccionado) {
					wdeleteConfirmation.show();
				} else {
					
					alert('Debe seleccionar un periodo');
				}
			}
		
			function periodoEdit(xhr, status, args) {
				if (args.validationFailed) {
					jQuery('#dlgPeriodo').effect("shake", { times:5 }, 100); 
				} else {
					rcUpdatePeriodos();
					wdlgPeriodo.hide();
				}
			}

			function validSelection() {
				if (wdtPeriodos.getSelectedRowsCount() == 0) {
					alert('Debe seleccionar un periodo');
					return false;
				}
			}

			function cerrarDialogPeriodo() {
				wdlgPeriodo.hide();
				rcLoadPeriodos();
			}

			function abrirDialog() {
				wdlgPeriodo.show();
			}

			function showDialog() {
				//var id = wizAbrirPeriodo.getStepIndex();
				var id = wizAbrirPeriodo.getStepIndex(wizAbrirPeriodo.currentStep);
				if (id != 0) {
					wizAbrirPeriodo.back();
				}
				//wizAbrirPeriodo.back();
			}
		</script>
	</ui:define>
</ui:composition>
